<!-- 书目列表 -->
<template>
    <div class="lib-box" ref="list-main" @scroll="scrollLoad()">
        <!--<img :src="sort.categoryCover" alt="" class="lib-bg">-->
        <div class="lib-body" :style="libList.length>0 ? 'background-image:url('+sort.categoryBackground+')':''">
            <div class="top-box clearfix" v-show="libList.length>0">
                <h3>{{sort.categoryName}}</h3>
                <div class="btn-grade right" @click="gradeMaskShow=true">{{grade}}年级</div>
            </div>
            <!-- 列表 -->
            <ul class="lib-list">
                <li class="clearfix shadow1" v-for="(item,index) in libList" :key="index" @click="goDetail(item)">
                    <img class="lib-img shadow1 left" :src="item.bookCover" alt="">
                    <div class="lib-con left">
                        <h4>{{item.bookName}}</h4>
                        <p>{{item.gradeName}} · {{item.bookCountry}} · {{item.bookAuthor}}</p>
                        <p>{{item.bookDescribe}}</p>
                    </div>
                    <!--<div class="lib-btn">
                        <span class="btn-add left" @click.stop="addBook(item)">+加入书架</span>
                        <router-link :to="{path:'/createTask',query: {bookid:item.id}}">
                            <span class="btn-task right">创建打卡任务</span>
                        </router-link>
                    </div>-->
                </li>
            </ul> 
            <!-- 加载提示 -->
            <div class="bottom-tips">{{bottomTip}}</div> 
            <!-- 空状态 -->
            <transition name='fade'>
                <div class="no-con" v-show="noConShow">
                    <img src="@/assets/img/no-con.png" alt="">
                    <p>暂无相关图书...</p>
                </div>
            </transition>     
        </div>
        <!-- 年级选择遮罩 -->
        <transition name='fade'>
            <grade v-show="gradeMaskShow" :gradeMaskShow="gradeMaskShow" @gradeClose="gradeClose" @gradeChoseFun="gradeChoseFun"></grade>
        </transition>
    </div>
</template>

<script>
import grade from '@/components/Grade'
import { axGet } from '@/api/index'

export default {
    name: "libList",
    components:{
        grade,
    },
    data(){
        return{
            type:this.$parent.myInfo.UserType, //0学生，1教师
            sort:JSON.parse(sessionStorage.getItem("thisSort")),//分类对象
            sortid:this.$route.query.sortid,
            schoolCode:this.$route.query.school,//学校id
            school:{},          //学校对象
            gradeIndex:0,       //当前年级
            grade:'全',
            gradeMaskShow:false,//年级遮罩
            libList:[],         //书本列表
            // 分页
            noConShow:false,
            listPage:1,
            totalPage:1,
            bottomTip:'到达世界的边缘咯...',
            isLoading:true,
        }
    },
    watch:{

    },
    created(){ 
        this.$parent.menuShow=true; 
        this.$parent.menuChose=2;
        /****** 验证登录 *****/ 
        if(!sessionStorage.getItem("myInfo")){
            this.$router.replace({path:'/',query: {}});
        }else{
            this.getBookList(1)
        }
    },
    mounted(){
    },
    destroyed(){
        this.gradeMaskShow=false;
    },
    methods:{
        //去详情
        goDetail(item){
            sessionStorage.setItem("thisBook",JSON.stringify(item))
            this.$router.push({path:'/bookDetail',query: {bookid:item.bookId}});
        },
        //列表请求
        getBookList(page){
            axGet('GetHRBookList', {
                PageIndex: page,
                PageSize:10,
                category:this.sortid,  //分类
                schoolCode:this.schoolCode,  //学校书库
                grade: this.gradeIndex,
            }).then(res => {
                if(res.ResultCode==1){
                    let listJson=res.Value.list;
                    listJson.forEach((item,i)=>{ 
                        if(item.grade==1){
                            item.gradeName='一年级'
                        }else if(item.grade==2){
                            item.gradeName='二年级'
                        }else if(item.grade==3){
                            item.gradeName='三年级'
                        }else if(item.grade==4){
                            item.gradeName='四年级'
                        }else if(item.grade==5){
                            item.gradeName='五年级'
                        }else if(item.grade==6){
                            item.gradeName='六年级'
                        }
                        this.libList.push(item)
                    })
                    if(page==1){
                        this.totalPage=res.Value.pageCount
                        this.libList.length==0 ? this.noConShow=true : this.noConShow=false
                    }
                    if(page<this.totalPage){
                        this.bottomTip='上拉加载更多'
                    }else{
                        this.bottomTip=''
                    }
                    this.isLoading=true;
                }else{
                    this.isLoading=false; 
                }
            })
        },
        // 添加书架
        addBook(item){
            this.$LayerTip({
                content:"已加入书架",
                time:1500,
            });
            // axGet('CreatKlxtWxGroupPurchase', {
            //     openid: this.$parent.openid,
            // }).then(res => {
            //     if(res.ResultCode==1){
                    
            //     }
            // })
        },
        gradeClose(){
            this.gradeMaskShow=false;
        },
        // 年级选择
        gradeChoseFun(item,index){
            console.log(index)
            this.gradeIndex=index;
            this.grade=item;
            this.gradeMaskShow=false;
            this.libList=[]
            this.listPage=1
            this.getBookList(1)
            
        },
        // 滚动加载   
        scrollLoad(){
            // let bodyH = document.documentElement.clientHeight || document.body.clientHeight;
            let bodyH = this.$refs['list-main'].clientHeight;
            let scrollH = this.$refs['list-main'].scrollTop;
            let listH=this.$refs['list-main'].scrollHeight;
            // console.log(bodyH,scrollH,listH)
            if(scrollH+bodyH+100>listH && this.isLoading){
                this.isLoading=false
                this.bottomTip='努力加载中...'
                // console.log(this.totalPage)
                this.listPage=this.listPage+1;
                if(this.listPage<this.totalPage || this.listPage == this.totalPage){
                    let page=this.listPage;
                    this.getBookList(page)
                }else{
                    if(this.libList.length>0){
                        this.bottomTip='到达世界的边缘咯...'
                        console.log('没有更多数据')
                    }else{
                        this.bottomTip=''; 
                    }
                    
                }
                
            }
            
        },
        
        
    }
}
</script>
<style type="text/css" scoped>
.lib-box{
    background: #fff;
    height: 100%;
    width: 100%;
    overflow: scroll;
}
.lib-bg{
    width:100%;
    height: auto;
}
.lib-body{
    background: #fff no-repeat 0 0;
    background-size: 100% auto;

    padding: 1.14rem 0.32rem 1.1rem;
    /* position: absolute;
    top: 0;
    left: 0; */
    box-sizing: border-box;
    width: 100%;
}
.lib-body .no-con{
    padding-top: 1.6rem;
}
.top-box{
    color: #fff;
    position: relative;
    padding-bottom: 0.38rem;
}
.top-box h3{
    width: 5.2rem;
    font-weight: bold;
    font-size: 0.6rem;
    line-height: 1;
}
.btn-grade{
    background: url('./../../assets/img/icon/change-w.png') no-repeat right 0.08rem center ;
    background-size: 0.23rem 0.24rem;
    padding-right: 0.44rem;
    font-size: 0.3rem;
    line-height: 1;
    position: absolute;
    right: 0;
    bottom: 0.4rem;
}
.lib-list li{
    margin-bottom: 0.3rem;
    background: #fff;
    box-sizing: border-box;
    padding:0.3rem 0 0.3rem 0.38rem;
    border-radius: 0.3rem;
    position: relative;
}
.lib-img{
    width: 1.6rem;
    height: 2.14rem;
    border-radius: 0.2rem;
}
.lib-con{
    padding: 0.16rem 0 0 0.38rem;
    width: 4.1rem;
    word-wrap: break-word;
    word-break: normal;
}
.lib-con h4{
    font-weight: bold;
    color: #000;
    line-height: 1;
    font-size: 0.36rem;
}
.lib-con p{
    font-size: 0.26rem;
    padding-top: 0.22rem;
    color: #666;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lib-btn{
    width: 4.08rem;
    position: absolute;
    left: 2.36rem;
    bottom: 0.34rem;
}
.lib-btn span{
    text-align: center;
    border-radius: 0.34rem;
}
.btn-add{
    border:0.02rem solid #e0e0e0;
    color: #666;
    width: 1.76rem;
    height: 0.56rem;
    line-height: 0.56rem;
}
.btn-task{
    background: #02affe;
    color: #fff;
    width: 2.1rem;
    height: 0.6rem;
    line-height: 0.6rem;
}
</style>